<template>
  <van-pull-refresh class="me-refresh" v-model="isRefresh" @refresh="onRefresh">
    <div class="container">
      <div class="user-info">
        <div class="nav">
          <div class="user-logo">
            <img
              class="logout"
              :src="userInfo.headImg || require('@/assets/me/user_logo.png')"
              alt="#"
            />
            <span v-if="userInfo.username" class="user-name">{{userInfo.username}}</span>
            <span v-else class="user-name">亲爱的用户</span>
          </div>
          <img class="logout" @click="handleLogout" src="../../assets/me/logout.png" alt="#" />
        </div>
        <div class="card">
          <img class="statistics-in" src="../../assets/capital/icon5.png" @click="toStatistics" alt />
          <div class="price">
            <div class="total_capitals">
              <!-- <p v-show="isShow">{{accountInfo.total_capital}}</p> -->
              <count-to
                v-if="isShow"
                :start-val="0"
                :decimals="2"
                :end-val="+accountInfo.all_total_capital || 0"
                :duration="300"
                class="card-panel-num"
              />
              <p v-else>****</p>
            </div>
            <div>
              用户总资产（元）
              <img
                class="eye-icon"
                v-if="isShow"
                @click="()=>{this.isShow = !this.isShow}"
                src="../../assets/me/open_eye.png"
                alt="#"
              />
              <img
                class="eye-icon"
                v-else
                @click="()=>{this.isShow = !this.isShow}"
                src="../../assets/me/close_eye.png"
                alt="#"
              />
            </div>
          </div>
          <!-- <div class="add-price">
            本月收入
            <span v-if="isShow">
              +
              <count-to
                :start-val="0"
                :decimals="2"
                :end-val="+accountInfo.month_income || 0"
                :duration="300"
                class="card-panel-num"
              />元
            </span>

            <span v-else>****</span>
          </div>-->
        </div>
        <div class="user-price">
          <div class="info">
            <p>代理可用余额（元）</p>
            <p v-if="isShow">
              <count-to
                :start-val="0"
                :decimals="2"
                :end-val="+accountInfo.usable_capital || 0"
                :duration="300"
                class="card-panel-num"
              />
            </p>
            <p v-else>****</p>

            <!-- <span v-show="other_role != 'ORDINARY'" class="hz-btn" @click="transferHandle">
              <img src="@/assets/me/hz.png" alt />
              互转
            </span>-->
          </div>
          <div class="user-btn" :class="{'big-div':other_role == 'ORDINARY'}">
            <div @click="handleTopUp('add')">提现</div>
            <div @click="handleTopUp('top_up')">充值</div>
            <div v-show="other_role != 'ORDINARY'" @click="transferHandle">互转</div>
          </div>
        </div>
        <div></div>
      </div>
      <div class="nav_bg" @click="handleDownload"></div>
      <div class="my-agent">
        <div class="nav">
          <div class="nav-title">我的代理</div>
          <div class="nav-btn" v-show="agencyList.length>0" @click="handleMoreAgent">更多</div>
        </div>
        <div class="agent-items" v-if="notAgent">
          <div
            class="item"
            v-for="(item,index) in agencyList"
            :key="index"
            @click="handleReadDetail(item.order_id)"
          >
            <div class="item-nav padding">
              <div class="title">
                <img v-if="item.store_type == 1" src="../../assets/me/monopoly.png" alt="#" />
                <img v-else-if="item.store_type == 2" src="../../assets/me/flagship.png" alt="#" />
                <span>{{item.store_name}}</span>
              </div>
              <div class="status" :class="{'status-img':item.start_status==3}">
                <p v-if="item.start_status==1">审核中</p>
                <p v-else-if="item.start_status==2">代理中</p>
                <img v-else-if="item.start_status==3" src="../../assets/me/end.png" alt="#" />
                <p v-else-if="item.start_status==4">已取消</p>
              </div>
            </div>
            <div class="item-content">
              <div class="image">
                <img :src="item.product_img" alt="#" />
                <div v-show="!item.is_deposit" class="deposit-mask">有订金</div>
                <div v-show="item.is_password" class="ds-mask">
                  <img src="@/assets/goods/ds2.png" class="ds-img" alt />
                </div>
              </div>
              <div class="info">
                <div class="title">
                  <span v-show="item.product_area">{{item.product_area}}</span>
                  {{item.product_name}}
                  {{item.product_place}}
                </div>
                <div class="detail">
                  <div class="detail-item">
                    <p>代理费率</p>
                    <p>{{item.agent_rate ? (item.agent_rate*100).toFixed(4) + '%' : '-'}}</p>
                  </div>
                  <div class="inline"></div>
                  <div class="detail-item">
                    <p>代理期限</p>
                    <p
                      v-if="item.agency_stage_max<=0 || !item.agency_stage_max"
                    >{{item.product_date ? item.product_date + '个月' : '无限期'}}</p>
                    <p v-else>{{item.product_date + '~' + item.agency_stage_max + '个月'}}</p>
                  </div>
                  <div class="inline"></div>
                  <div class="detail-item">
                    <p>已付订金</p>
                    <p>{{item.deposit_paid}}元</p>
                  </div>
                </div>
                <div class="time">{{item.agent_time | parseTime}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="not-agent" v-if="agencyList.length<=0">
          <img src="../../assets/me/not_agent.png" alt="#" />
          <p>你还没有代理过商品，赶快去代理吧</p>
          <router-link to="/goods">
            <div class="go-agent">去代理</div>
          </router-link>
        </div>
      </div>
      <div class="help">
        <div class="nav">
          <div class="title">帮助中心</div>
          <!-- <div class="btn" @click="handleReadMoreHelp">更多</div> -->
        </div>
        <div class="top" @click="handleReadHelpDetail(firstHelp.id)">
          <div class="title help-title">
            <img class="help-title-img" src="../../assets/me/issue.png" alt="#" />
            {{firstHelp.title}}
          </div>
          <div class="text">
            <p>{{firstHelp.content}}</p>
          </div>
        </div>
        <div class="help-items">
          <div
            class="item"
            v-for="(item,index) in helpList"
            :key="index"
            @click="handleReadHelpDetail(item.id)"
          >
            <p>{{item.title}}</p>
            <van-icon class="icon" name="arrow" color="#BCBCBC" />
          </div>
        </div>
      </div>
      <van-dialog
        v-model="logoutDialog"
        class="logout-dialog"
        :showConfirmButton="false"
        :showCancelButton="false"
      >
        <div name="title" class="title">提示</div>
        <div name="default" class="content">确定退出云木屋吗？</div>
        <div class="footer">
          <div class="enter" @click="handleEnter">确认</div>
          <div class="cancel" @click="()=>{this.logoutDialog = !this.logoutDialog}">取消</div>
        </div>
      </van-dialog>
      <van-dialog
        v-model="priceMangeDialog"
        class="mange-dialog"
        :showConfirmButton="false"
        :showCancelButton="false"
      >
        <div name="default" class="content">
          <img src="../../assets/me/price_mange.png" alt="#" />
          <div class="text">
            <p>您尚未开通资金管理服务</p>
            <p>请前往签署交易资金托管三方协议</p>
          </div>
        </div>
        <div class="footer">
          <div class="enter" @click="_ssqSignContract">立即前往</div>
          <div class="cancel" @click="()=>{ this.priceMangeDialog = !this.priceMangeDialog}">暂不签署</div>
        </div>
      </van-dialog>

      <van-dialog
        v-model="isAuthDialog"
        class="mange-dialog isAuth-dialog"
        :showConfirmButton="false"
        :showCancelButton="false"
      >
        <div class="content">
          <img src="../../assets/me/price_mange.png" alt="#" />
          <div class="text">
            <p>您还没有加入云木屋</p>
            <p>正在为您跳转认证页面...</p>
          </div>
        </div>
      </van-dialog>
    </div>
  </van-pull-refresh>
</template>

<script>
import CountTo from "vue-count-to";
import { parseTime } from "@/utils";
import { getUserInfo, modifyUserInfo } from "@/api/user";
import { getAccount } from "@/api/me";
import { getAgentAjax } from "@/api/myagency";
import { getToken, setToken, removeToken } from "@/utils/auth";
import { gethelplist } from "@/api/help";
import { checkSign } from "@/api/rechargeWithDrawal";
import { ssqSignContract } from "@/api/authentication";
import { Notify } from "vant";
import { mapGetters } from "vuex";
import { getCapitalStatistics } from "@/api/capital";
export default {
  data() {
    return {
      isRefresh: false,
      isShow: false, //控制 金额 **** 显示
      notAgent: true, //控制是否有代理
      logoutDialog: false, //退出登录弹窗
      priceMangeDialog: false, //资产管理服务弹窗
      signFlag: true,
      token: getToken(),
      userInfo: {},
      accountInfo: {},
      agencyList: [],
      listParams: {
        p: 1,
        limit: 3,
        is_state: 0,
        is_deposit: 0,
      },
      helpList: [],
      firstHelp: {},
      isAuthDialog: false,
      other_role: "",
    };
  },
  components: {
    CountTo,
  },
  computed: {
    ...mapGetters(["toLogin"]),
  },
  created() {
    console.log("asdksadj");
    this.$store.commit("title/SET_TITLE", "我的云木屋");

    if (!this.token) {
      this.$dialog
        .alert({
          message: "登录已失效，请重新登录",
        })
        .then(() => {
          this.$router.push({
            name: "login",
          });
        });
    } else {
      this.$toast.loading({
        duration: 0,
        message: "数据加载中",
        forbidClick: true,
        loadingType: "spinner",
      });
      this._getUserInfo();
      this._getCapitalStatistics();
    }
  },
  watch: {
    watch: {
      $route: "getPath",
    },
  },
  methods: {
    getPath() {
      console.log("路由变化了111111111111111");
    },
    // 下拉刷新
    onRefresh() {
      // this.$toast.loading({
      //   duration: 0,
      //   message: "数据加载中",
      //   forbidClick: true,
      //   loadingType: "spinner"
      // });
      this._getUserInfo();
    },
    // 获取资金统计数据
    _getCapitalStatistics() {
      getCapitalStatistics()
        .then((res) => {
          if (res.code == 1 && res.data) {
            this.other_role = res.data.other_role;
            console.log("角色身份", this.other_role);
          } else {
            console.log("资金统计请求错误", res.msg || "请求失败");
          }
        })
        .catch((error) => {
          reject(error);
        });
    },
    // 获取帮助列表
    _gethelplist() {
      gethelplist()
        .then((res) => {
          console.log("帮助列表res", res);
          if (res.code == 1) {
            this.firstHelp = res.data[0];
            console.log(
              "res.data.slice(1,res.data.length);",
              res.data.slice(1, res.data.length)
            );
            this.helpList = res.data.slice(1, res.data.length);
            console.log("帮助列表", this.helpList);
          }
        })
        .finally(() => {
          this.$toast.clear();
          this.isRefresh = false;
        });
    },
    beforeDestroy() {
      this.logoutDialog = false;
    },

    // 电子协议签署检测
    _checkSign() {
      checkSign()
        .then((res) => {
          console.log("电子协议签署检测res", res);
          // res.code = 10021;
          if (res.code == 10021) {
            // 未签署电子协议
            this.priceMangeDialog = true;
            this.signFlag = false;
          } else if (res.code == 10022) {
            // 已签署电子协议
            this.signFlag = true;
          }
        })
        .catch(() => {
          this.$toast.clear();
          this.isRefresh = false;
        });
    },
    // 下载云木屋app
    handleDownload() {
      window.open("https://m.mutouyun.cn/mobile/download");
    },
    // 签署电子协议
    _ssqSignContract() {
      ssqSignContract().then((res) => {
        if (res.code == 1) {
          window.open(res.data.url, "_self");
        } else {
          Notify({ type: "warning", message: res.msg });
        }
      });
    },
    // 获取用户信息
    _getUserInfo() {
      getUserInfo(this.token)
        .then((res) => {
          if (res.code == 1) {
            this.userInfo = res.data;
            console.log("用户信息", this.userInfo);
            this.$store.commit("user/SET_USERINFO", this.userInfo);
            localStorage.setItem("yst_user_type", this.userInfo.yst_user_type);
            // 是否代理商检测
            if (this.userInfo.status == 1) {
              let isPriceMange =
                localStorage.getItem("priceMangeDialog") || false;
              if (isPriceMange) {
                this.priceMangeDialog = false;
              }
              this._getAccount();
              this._getAgentAjax();
              this._checkSign();
              this._gethelplist();
            } else {
              this.isAuthDialog = true;
              this.isRefresh = false;
              this.$toast.clear();
              this.$store.commit(
                "login/SET_TOLOGIN",
                setTimeout(() => {
                  this.$router.push({
                    name: "explain",
                  });
                }, 2000)
              );
            }
          }
        })
        .catch(() => {
          this.$toast.clear();
          this.isRefresh = false;
        });
    },
    // 获取资金信息
    _getAccount() {
      getAccount()
        .then((res) => {
          if (res.code == 1) {
            this.accountInfo = res.data;
            console.log("资金信息", this.accountInfo);
          } else {
            console.log(res.msg);
          }
        })
        .catch(() => {
          this.$toast.clear();
          this.isRefresh = false;
        });
    },
    // 获取我的代理列表
    _getAgentAjax() {
      getAgentAjax(this.listParams)
        .then((res) => {
          if (res.code == 1) {
            this.agencyList = res.data.list || [];
            console.log("我的代理列表", this.agencyList);
          } else {
            console.log(res.msg);
          }
        })
        .catch(() => {
          this.$toast.clear();
          this.isRefresh = false;
        });
    },
    // 查看更多帮助
    handleReadMoreHelp() {
      this.$router.push({
        path: "/help",
      });
    },
    // 前往充值或提现
    handleTopUp(type) {
      if (!this.signFlag) {
        this.priceMangeDialog = true;
      } else {
        this.$router.push({
          path: "/top_up",
          query: {
            type,
          },
        });
      }
    },
    // 查看帮助详情
    handleReadHelpDetail(id) {
      this.$router.push({
        path: "/help_detail",
        query: {
          id,
        },
      });
    },
    // 查看更多代理
    handleMoreAgent() {
      this.$router.push({
        path: "/my_agent",
      });
    },
    // 查看代理详情
    handleReadDetail(id) {
      this.$router.push({
        path: "/agent_detail",
        query: {
          id,
        },
      });
    },
    // 确认退出登录
    handleEnter() {
      this.logoutDialog = false;
      removeToken();
      this.$router.push({
        path: "/login",
      });
    },
    // 资金互转
    transferHandle() {
      this.$router.push({
        name: "transfer",
      });
    },
    // 资金统计
    toStatistics() {
      this.$router.push({
        name: "statistics",
      });
    },
    // 退出登录
    handleLogout() {
      this.logoutDialog = true;
    },
  },
};
</script>

<style lang='scss' scoped>
.container {
  width: 100vw;
  min-height: 100vh;
  padding-bottom: 50px;
  background: rgba(237, 237, 237, 1);
  > .user-info {
    width: 100%;
    padding: 36px 0 0 0;
    margin-bottom: 20px;
    background: url("../../assets/me/t-bg.png");
    background-size: 100% 100%;
    > .nav {
      display: flex;
      justify-content: space-between;
      align-content: center;
      margin-bottom: 40px;
      padding: 0 30px;
      position: relative;
      > .user-logo {
        > img {
          width: 60px;
          height: 60px;
          vertical-align: middle;
          margin-right: 16px;
          border-radius: 50%;
        }
      }
      .user-name {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
      > .logout {
        margin-top: 10px;
        width: 34px;
        height: 34px;
      }
    }
    > .card {
      width: 90%;
      height: 278px;
      margin: 0 auto;
      padding: 56px 0 52px 0;
      background: url("../../assets/me/user_info_bg.png") no-repeat;
      background-size: 100% 100%;
      color: #fff;
      position: relative;
      .statistics-in {
        width: 40px;
        height: 40px;
        position: absolute;
        top: 50%;
        right: 35px;
        transform: translateY(-50%);
      }
      > .price {
        > div:nth-of-type(1) {
          font-size: 60px;
          font-weight: bolder;
        }
        > div:nth-of-type(2) {
          font-size: 26px;
          font-weight: 400;
          padding: 20px 0 40px 0;
          font-weight: 400;
          color: rgba(255, 194, 166, 1);
          > img {
            width: 30px;
            height: 20px;
            margin-left: 10px;
          }
        }
        > .add-price {
          font-size: 30px;
        }
      }
    }
    > .user-price {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      width: 100%;
      height: 250px;
      padding: 0 30px;
      margin-top: -75px;
      padding-bottom: 50px;
      background: url("../../assets/me/withdraw.png") no-repeat;
      background-size: 100% 100%;
      position: relative;
      .info {
        text-align: left;
        position: relative;
        top: 20px;
        > p:nth-of-type(1) {
          font-size: 26px;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          padding-bottom: 20px;
        }
        > p:nth-of-type(2) {
          font-size: 40px;
          font-weight: bolder;
          color: rgba(17, 17, 17, 1);
        }
        .hz-btn {
          color: #3287ff;
          position: relative;
          top: 12px;
          img {
            width: 28px;
            height: 25px;
            position: relative;
            top: 3px;
            margin-right: 5px;
          }
        }
      }
      .user-btn {
        display: flex;
        align-content: center;
        > div {
          width: 125px;
          height: 56px;
          line-height: 56px;
          background: rgba(255, 135, 0, 0);
          border: 2px solid rgba(255, 134, 0, 1);
          border-radius: 4px;
          color: #ff8a03;
          margin-left: 12px;
          &:first-of-type {
            margin: 0;
          }
          &:nth-of-type(2) {
            background: linear-gradient(
              90deg,
              rgba(255, 147, 3, 1),
              rgba(254, 96, 24, 1)
            );
            color: #fff;
          }
        }
        &.big-div {
          > div {
            width: 160px;
            height: 64px;
            line-height: 64px;
            margin-left: 16px;
          }
        }
      }
    }
  }
  > .nav_bg {
    width: 100%;
    height: 200px;
    background: url("../../assets/me/nav_bg.png") no-repeat;
    background-size: 100% 100%;
    margin-bottom: 20px;
  }
  > .my-agent {
    width: 100%;
    background-color: #fff;
    > .nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30px;
      > .nav-title {
        font-size: 34px;
        font-weight: bolder;
        color: rgba(17, 17, 17, 1);
      }
      > .nav-btn {
        font-size: 26px;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
      }
    }

    > .agent-items {
      > .item {
        > .item-nav {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 30px;
          border-top: 1px solid #f2f2f2;
          border-bottom: 1px solid #f2f2f2;
          position: relative;
          > .title {
            display: flex;
            font-size: 28px;
            font-weight: bolder;
            color: rgba(17, 17, 17, 1);
            > img {
              width: 90px;
              height: 30px;
              margin-right: 12px;
            }
          }
          > .status {
            font-size: 28px;
            font-weight: 400;
            color: rgba(254, 96, 24, 1);
            &.status-img {
              position: absolute;
              top: 0;
              right: 30px;
            }
            > img {
              width: 80px;
              height: 64px;
            }
          }
        }
        > .padding {
          padding: 30px 30px;
        }
        > .item-content {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 30px 24px 46px;
          > .image {
            position: relative;
            width: 236px;
            height: 236px;
            background: rgba(238, 238, 238, 1);
            border-radius: 8px;
            > img {
              width: 100%;
              height: 100%;
              position: relative;
              z-index: 11;
            }
            > .deposit-mask {
              position: absolute;
              right: 16px;
              top: 16px;
              border-radius: 10px;
              color: #fff;
              padding: 4px 8px 3px 8px;
              background: #e4b05a;
              z-index: 33;
              font-size: 24px;
            }
            .ds-mask {
              width: 100%;
              height: 100%;
              position: absolute;
              top: 0;
              left: 0;
              background: rgba(40, 18, 11, 0.5);
              z-index: 22;
              .ds-img {
                width: 52px;
                height: 68px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
            }
          }
          > .info {
            flex: 1;
            text-align: left;
            padding: 10px 20px;
            .title {
              display: flex;
              margin-bottom: 40px;
              font-size: 26px;
              color: rgba(17, 17, 17, 1);
              font-weight: 500;
              > span {
                display: block;
                padding: 0 2px;
                margin-top: -2px;
                height: 26px;
                line-height: 30px;
                border: 2px solid rgba(254, 96, 24, 1);
                border-radius: 4px;
                font-size: 20px;
                color: rgba(254, 96, 24, 1);
                margin-right: 12px;
                font-weight: 400;
              }
            }
            .detail {
              display: flex;
              justify-content: space-between;
              align-content: center;
              margin-bottom: 64px;
              > .detail-item {
                text-align: center;
                > p:nth-of-type(1) {
                  font-size: 24px;
                  font-weight: 400;
                  color: rgba(153, 153, 153, 1);
                  margin-bottom: 12px;
                }
                > p:nth-of-type(2) {
                  font-size: 24px;
                  font-family: PingFang SC;
                  font-weight: 400;
                  color: rgba(17, 17, 17, 1);
                }
              }
              > .inline {
                width: 1px;
                height: 30px;
                margin-top: 16px;
                background: rgba(236, 236, 236, 1);
              }
            }
            .time {
              font-size: 22px;
              font-weight: 400;
              color: rgba(153, 153, 153, 1);
            }
          }
        }
      }
    }
    > .not-agent {
      padding: 60px 0 50px 0;
      > img {
        display: block;
        width: 230px;
        height: 331px;
        margin: 0 auto;
        margin-bottom: 30px;
      }
      > p {
        font-size: 26px;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        padding-bottom: 30px;
      }
      .go-agent {
        margin: 0 auto;
        width: 240px;
        height: 70px;
        line-height: 70px;
        color: #fff;
        font-size: 28px;
        background: linear-gradient(
          90deg,
          rgba(255, 147, 3, 1),
          rgba(254, 96, 24, 1)
        );
        border-radius: 4px;
      }
    }
  }
  > .help {
    padding: 30px;
    padding-bottom: 50px;
    margin-top: 20px;
    background-color: #fff;
    > .nav {
      display: flex;
      justify-content: space-between;
      align-content: center;
      margin-bottom: 30px;
      > .title {
        font-size: 34px;
        font-weight: bolder;
        color: rgba(17, 17, 17, 1);
      }
      > .btn {
        font-size: 26px;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
      }
    }
    > .top {
      width: 100%;
      padding: 40px 0;
      background: rgba(255, 248, 238, 1);
      border-radius: 8px 8px 8px 0px;
      margin-bottom: 14px;
      > .title {
        width: 90%;
        margin: 0 auto;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 32px;
        font-weight: 400;
        color: rgba(17, 17, 17, 1);
        margin-bottom: 30px;
        &.help-title {
          align-items: initial;
          line-height: 48px;
          text-align: left;
          .help-title-img {
            margin-top: 8px;
          }
        }
        > img {
          width: 30px;
          height: 30px;
          margin-bottom: 4px;
          margin-right: 11px;
        }
      }
      > .text {
        width: 90%;
        margin: 0 auto;
        height: 160px;
        background: rgba(255, 255, 255, 1);
        border-radius: 0px 40px 40px 40px;
        padding: 40px 48px 40px 30px;
        text-align: left;
        p {
          font-size: 28px;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          line-height: 44px;
          overflow: hidden;
          /*将对象作为弹性伸缩盒子模型显示*/
          display: -webkit-box;
          /*设置子元素排列方式*/
          -webkit-box-orient: vertical;
          /*设置显示的行数，多出的部分会显示为...*/
          -webkit-line-clamp: 2;
        }
      }
    }
    > .help-items {
      > .item {
        display: flex;
        justify-content: space-between;
        align-content: center;
        padding: 40px 0;
        border-bottom: 1px solid #f2f2f2;
        > p {
          font-size: 30px;
          font-weight: 400;
          color: rgba(17, 17, 17, 1);
        }
        > .icon {
          margin-top: 2px;
          font-size: 30px;
        }
      }
    }
  }
  .logout-dialog {
    width: 650px;
    height: 327px;
    background: rgba(255, 255, 255, 1);
    border-radius: 10px;
    padding: 30px 50px;
    .title {
      font-size: 32px;
      font-weight: 500;
      color: rgba(17, 17, 17, 1);
      margin-bottom: 30px;
    }
    .content {
      font-size: 30px;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      line-height: 48px;
      margin-bottom: 60px;
    }
    .footer {
      display: flex;
      justify-content: center;
      > div {
        width: 210px;
        height: 70px;
        line-height: 70px;
        background: rgba(238, 238, 238, 1);
        border-radius: 4px;
        color: #666666;
        &:nth-of-type(1) {
          margin-right: 40px;
          color: #fff;
          background: linear-gradient(
            90deg,
            rgba(255, 147, 3, 1),
            rgba(254, 96, 24, 1)
          );
        }
      }
    }
  }
  .mange-dialog {
    width: 650px;
    height: 725px;
    padding: 60px 0;
    background: rgba(255, 255, 255, 1);
    border-radius: 10px;
    &.isAuth-dialog {
      .content {
        margin-top: 80px;
      }
    }
    .content {
      margin-bottom: 50px;
      > img {
        width: 395px;
        height: 284px;
        margin-bottom: 30px;
      }
      > .text {
        font-size: 30px;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 48px;
      }
    }
    .footer {
      > div {
        font-size: 30px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
      }
      > div:nth-of-type(1) {
        width: 540px;
        height: 88px;
        line-height: 88px;
        text-align: center;
        color: #fff;
        font-size: 30px;
        margin: 0 auto 28px;
        background: linear-gradient(
          90deg,
          rgba(255, 147, 3, 1),
          rgba(254, 96, 24, 1)
        );
        border-radius: 4px;
      }
    }
  }
}
</style>
